<template>
  <div class="function-base-page">
    <!-- 头部 -->
    <div class="header-flex">
      <je-toolbar>
        <je-button
          type="text"
          class="clean-right-border"
          :loading="loading"
          icon="fal fa-save"
          @click="operateButton('save')"
        >
          保存
        </je-button>
        <!-- hidden -->
        <!-- <je-button type="text" class="clean-right-border" @click="operateButton('extend')"
          ><i class="fal fa-browser"></i><span class="button-pointer">扩展面板</span></je-button
        > -->
        <je-button
          type="text"
          class="clean-right-border"
          icon="jeicon jeicon-upload-cloud"
          @click="operateButton('async')"
          >字段与其他功能字段配置同步</je-button
        >
        <TbFill />
        <je-button
          v-for="item in CORE_CONFIG_ANCHOR"
          :key="item.value"
          type="text"
          @click="handleAnchorClick(item.value)"
          ><span class="button-pointer button-color">{{ item.label }}</span></je-button
        >
      </je-toolbar>
    </div>
    <div id="function-container" ref="preview" class="function-content">
      <div v-for="item in CORE_CONFIG_ANCHOR" :key="item.value" :type="item.value">
        <div class="title"
          ><i :class="item.icon" style="margin-right: 6px"></i>{{ item.label }}</div
        >
        <je-form
          :model="formState"
          class="function-form-container"
          label-align="right"
          :colon="false"
          :label-col="{ style: { width: '200px' } }"
          autocomplete="off"
        >
          <je-row type="flex">
            <je-col
              v-for="(childItem, colIndex) in item.formData"
              :id="`col${colIndex}`"
              :key="`col${colIndex}`"
              :span="childItem.layout == 'flex' ? 11 : 22"
              :style="`display: ${isShowFormItem(childItem) ? 'block' : 'none'}`"
            >
              <je-form-item
                v-if="isShowFormItem(childItem)"
                :key="childItem.value"
                :name="childItem.value"
                v-bind="childItem.require ? validateInfos[childItem.value] : ''"
                validate-type="tooltip"
              >
                <template #label>
                  <i
                    v-if="childItem.unitTpl"
                    class="fas fa-question-circle"
                    style="color: #ebebeb"
                    :style="changeColor(childItem.unitTipShow)"
                    @click="clickTipView(childItem)"
                    @mouseenter="childItem.unitTipShow = true"
                    @mouseleave="childItem.unitTipShow = false"
                  />
                  <je-checkbox
                    v-if="childItem.type == 'checkbox'"
                    v-model:checked="checkAll"
                    :indeterminate="indeterminate"
                    @change="onCheckAllChange"
                  >
                  </je-checkbox>
                  {{ childItem.label }}
                  <!-- <i
                    v-if="childItem.complete"
                    class="fas fa-flower"
                    style="color: rgb(235, 235, 235)"
                  ></i> -->
                </template>
                <je-form-item-rest>
                  <je-color
                    v-if="childItem.type == 'color'"
                    v-model:value="formState[childItem.value]"
                  />
                  <je-grid-select
                    v-if="childItem.type == 'mark-input-select'"
                    v-model:value="formState[childItem.value]"
                    :name="childItem.value"
                    :config-info="childItem.configInfo"
                    :querys="[
                      {
                        code: 'SY_PRODUCT_ID',
                        type: '=',
                        value: productId,
                        cn: 'and',
                      },
                    ]"
                    :orders="childItem.orders"
                    @select="selectFuncItem"
                  />
                  <je-grid-select
                    v-if="childItem.type == 'input-select'"
                    v-model:value="formState[childItem.value]"
                    :name="childItem.value"
                    :config-info="childItem.configInfo"
                    :querys="querysArr"
                    :orders="childItem.orders"
                  />
                  <div v-if="childItem.type == 'select-grid'">
                    <je-grid-select
                      v-model:value="formState[childItem.value]"
                      :name="childItem.value"
                      :config-info="childItem.configInfo"
                      :querys="[
                        {
                          code: 'RESOURCETABLE_ISCREATE',
                          type: '=',
                          value: '1',
                          cn: 'and',
                        },
                        {
                          code: 'SY_PRODUCT_ID',
                          type: '=',
                          value: productId,
                          cn: 'and',
                        },
                      ]"
                      :orders="childItem.orders"
                    />
                  </div>
                  <je-icon
                    v-if="childItem.type == 'icon'"
                    v-model:value="formState[childItem.value]"
                  />
                  <div v-if="childItem.type == 'input'">
                    <je-input
                      v-model:value="formState[childItem.value]"
                      :placeholder="childItem.placeholder"
                      :disabled="childItem.disabled"
                      :max-length="40"
                      allow-clear
                    >
                      <!-- @change="checkSql(childItem.value)" -->
                      <template v-if="childItem.suffixcontent" #addonAfter>
                        <span style="cursor: pointer" @click="editShow = true">{{
                          childItem.suffixcontent
                        }}</span>
                      </template>
                    </je-input>

                    <span
                      v-for="(sort, index) in childItem.operate"
                      :key="index"
                      style="
                        margin: 8px 10px 0 0;
                        display: inline-block;
                        color: #3265f5;
                        cursor: pointer;
                      "
                      @click="changeOrderSql(childItem.value, sort)"
                    >
                      {{ sort.text }}
                    </span>
                  </div>
                  <div v-if="childItem.type == 'treeTable'">
                    <je-tree-config
                      :data="formState[childItem.value]"
                      @getTreeConfigRef="getTreeConfigRef"
                    ></je-tree-config>
                  </div>
                  <div v-if="childItem.type == 'treeTable1'">
                    <je-tree-more-config
                      :data="formState[childItem.value]"
                      :func-code="formState.JE_CORE_FUNCINFO_ID"
                      @getMoreConfigRef="getMoreConfigRef"
                    ></je-tree-more-config>
                  </div>
                  <je-tree-table
                    v-if="childItem.type == 'treeTable2'"
                    :data="formState[childItem.value]"
                    :data-id="formState.RESOURCETABLE_TABLESINFO"
                    @getTableRef="getTableRef"
                  ></je-tree-table>
                  <div v-if="childItem.type == 'textarea'">
                    <je-textarea
                      v-model:value="formState[childItem.value]"
                      :placeholder="childItem.placeholder"
                      :rows="4"
                      allow-clear
                      @change="changeTextarea(childItem.value)"
                    />
                    <span
                      v-for="(sort, index) in childItem.operate"
                      :key="index"
                      style="
                        cursor: pointer;
                        margin: 8px 10px 0 0;
                        display: inline-block;
                        color: #539500;
                      "
                      @click="changeSort(childItem.value, sort)"
                    >
                      {{ sort.text }}
                    </span>
                  </div>

                  <div v-if="childItem.type == 'select'">
                    <je-select
                      v-if="childItem.configInfo"
                      v-model:value="formState[childItem.value]"
                      :config-info="childItem.configInfo"
                      @change="changeSelect(childItem.value)"
                    ></je-select>
                    <je-select
                      v-if="!childItem.configInfo"
                      v-model:value="formState[childItem.value]"
                      :options="childItem.selectData"
                      @change="changeSelect(childItem.value)"
                    ></je-select>
                  </div>
                  <div v-if="childItem.type == 'selectFunction'">
                    <je-select
                      v-model:value="formState[childItem.value]"
                      :options="childItem.selectData"
                      :dropdown-match-select-width="true"
                      @change="changeSelect(childItem.value)"
                    >
                      <template #option="{ label, img, unitTpl }">
                        <div class="tip-item">
                          <img :src="img" class="img" />
                          <div class="item-right" style="padding: 10px 0">
                            <div style="color: #3f3f3f">{{ label }}</div>
                            <div style="color: #a9a9a9">{{ unitTpl }}</div>
                          </div>
                        </div>
                      </template>
                    </je-select>
                  </div>
                  <div v-if="childItem.type == 'switch'">
                    <je-switch v-model:value="formState[childItem.value]" />
                    <i style="margin-left: 5px; color: #3265f5">{{ childItem.describe }}</i>
                  </div>
                  <div v-if="childItem.type == 'checkbox'">
                    <je-checkbox-group
                      v-model:value="formState[childItem.value]"
                      :options="childItem.checkboxData"
                    />
                  </div>
                  <div v-if="childItem.type == 'inputNumber'">
                    <je-input-number
                      v-model:value="formState[childItem.value]"
                      :min="1"
                      style="width: 100%"
                    >
                      <template #addonAfter>
                        {{ childItem.suffix }}
                      </template>
                    </je-input-number>
                  </div>
                  <div
                    v-if="childItem.type == 'workflow'"
                    style="width: 300px; display: flex; height: 32px"
                  >
                    <je-input
                      v-model:value="formState[childItem.value]"
                      :disabled="childItem.disabled"
                    />
                    <je-tooltip placement="top" title="创建流程">
                      <i
                        style="margin-left: 10px; cursor: pointer"
                        class="fal-background jeicon jeicon-plus-circle"
                        @click="clickIconWF"
                      ></i>
                    </je-tooltip>
                  </div>
                  <div v-if="childItem.type == 'table'">
                    <!-- <je-row type="flex"> -->
                    <div
                      v-for="(wfItem, index) in formState[childItem.value]"
                      :key="index"
                      style="margin-bottom: 8px"
                    >
                      <!-- <je-select
                      v-model:value="wfItem.text"
                      :options="childItem.selectData"
                      style="width: 140px"
                      :editable="true"
                      show-arrow
                    ></je-select> -->
                      <div style="display: inline-block; width: 100%">
                        <je-input-number v-model:value="wfItem.value" :min="0" />
                      </div>
                      <!-- <i
                      :class="[index == 0 ? 'fa-plus' : 'fa-times']"
                      class="fal fa-plus-style"
                      :style="{ background: index == 0 ? '' : '#FF625C' }"
                      @click="addColumn(childItem.value, index)"
                    ></i> -->
                    </div>
                    <div v-if="rulesHeight" style="color: #ff4d4f; padding-left: 150px"
                      >该字段不能为空</div
                    >
                    <!-- </je-row> -->
                  </div>
                </je-form-item-rest>
              </je-form-item>
            </je-col>
          </je-row>
        </je-form>
      </div>
    </div>
    <!-- 扩展面板 -->
    <div v-if="extendShow">
      <je-extend-panel
        :extend-data="formState.FUNCINFO_EXPANDPANELS"
        :visble="extendShow"
        @changeModal="extendShow = false"
        @changeExtend="changeExtend"
      ></je-extend-panel>
    </div>
    <!-- 编辑弹窗 -->
    <div v-if="editShow">
      <je-edit-modal
        :record="formState"
        :visble="editShow"
        @changeModal="editShow = false"
        @changeFunctionCode="changeFunctionCode"
      ></je-edit-modal>
    </div>
    <!-- 字段配置同步 -->
    <div v-if="asyncConfigShow">
      <je-async-config
        :record="formState"
        :visble="asyncConfigShow"
        @changeModal="asyncConfigShow = false"
      ></je-async-config>
    </div>
  </div>
</template>

<script>
  import {
    ref,
    defineComponent,
    onMounted,
    reactive,
    watch,
    defineAsyncComponent,
    toRefs,
    onBeforeMount,
    nextTick,
  } from 'vue';
  import { FUNCTION_BSAE_FORM, getChildShowData, getInsertData } from '@/helper/constant';
  import { formRules } from '@/helper/regular';
  import VueEvent from '@/helper/event';
  import { useMicroStore } from '@common/store/micro-store';
  import {
    GetListBaseConfig,
    baseConfigSave,
    ChangeTranslateSql,
    UpdateTableItemFunction,
  } from '@/api/index';
  import {
    Row,
    Col,
    Switch,
    Form,
    Modal,
    Color,
    Icon,
    InputNumber,
    Select,
    Checkbox,
    Button,
    Input,
    InputSelect,
    Toolbar,
  } from '@jecloud/ui';

  const useForm = Form.useForm;
  import { useFuncStore } from '@/store/func-store';
  import { loadDDItemByCodes } from '@jecloud/utils';

  export default defineComponent({
    name: 'Function',
    components: {
      JeButton: Button,
      JeRow: Row,
      JeCol: Col,
      JeForm: Form,
      JeTextarea: Input.TextArea,
      JeFormItem: Form.Item,
      JeFormItemRest: Form.Item.Rest,
      JeInput: Input,
      JeInputNumber: InputNumber,
      JeSelect: Select,
      JeSwitch: Switch,
      JeCheckbox: Checkbox,
      JeCheckboxGroup: Checkbox.Group,
      JeExtendPanel: defineAsyncComponent(() => import('./compontents/extend.vue')),
      JeTreeTable: defineAsyncComponent(() => import('./compontents/treeTable2.vue')),
      JeTreeConfig: defineAsyncComponent(() => import('./compontents/treeTable3.vue')),
      JeTreeMoreConfig: defineAsyncComponent(() => import('./compontents/treeTable4.vue')),
      JeEditModal: defineAsyncComponent(() => import('./compontents/modal-update.vue')),
      JeAsyncConfig: defineAsyncComponent(() => import('./compontents/async-config.vue')),
      JeColor: Color,
      JeIcon: Icon,
      JeGridSelect: InputSelect.Grid,
      JeToolbar: Toolbar,
      TbFill: Toolbar.Fill,
    },
    props: {
      recordData: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    emits: ['changeModal', 'changeRecord', 'changeExtend', 'changeFunctionCode'],
    setup(props) {
      const funcStore = useFuncStore();
      const productId = ref(funcStore.product.id);
      let formState = ref(funcStore.funcBean);
      const CORE_CONFIG_ANCHOR = ref([]);
      const extendShow = ref(false);
      const preview = ref(null);
      const state = reactive({
        indeterminate: true,
        checkAll: false,
      });
      // const defaultData = ['keyword', 'column', 'strategy', 'group'];
      const defaultData = ['keyword', 'strategy', 'group'];
      const xTreeTable = ref(null);

      const mouseNowData = ref({});
      const modalShow = ref(false);
      const editShow = ref(false);
      // 字段配置同步默认是隐藏的
      const asyncConfigShow = ref(false);

      const loading = ref(false);

      const querysArr = ref([]);

      // 表单校验必填项
      const rulesRef = reactive({
        ...formRules(),
        FUNCINFO_TABLENAME: [
          {
            required: true,
            message: '该输入项为必填项',
          },
          {
            max: 40,
            message: '不能大于40个字符',
          },
          {
            pattern: '^[^\\\\/*?:"\'<>|\x22]+$',
            message: '不能输入非法字符',
          },
        ],
        // FUNCINFO_ORDERSQL: [
        //   {
        //     pattern: '^[^\\\\/*?:"\'<>|\x22]+$',
        //     message: '输入格式不正确',
        //   },
        // ],
        FUNCINFO_PKNAME: [
          {
            required: true,
            message: '该输入项为必填项',
          },
        ],
        FUNCINFO_FUNCTYPE: [
          {
            required: true,
            message: '该输入项为必填项',
          },
        ],
        FUNCINFO_TREETITLE: [
          {
            required: true,
            message: '该输入项为必填项',
          },
        ],
        // FUNCINFO_CRUDTABLENAME: [
        //   {
        //     required: false,
        //     message: '该输入项为必填项',
        //   },
        // ],
      });
      const { validateInfos, validate } = useForm(formState, rulesRef, {
        onValidate: (...args) => {},
      });
      const tableRef = ref(null);

      const rulesHeight = ref(false);
      watch(
        () => formState.value.FUNCINFO_DISABLEQUERYSQL,
        (newVal) => {
          let val = newVal ? newVal : [];
          val = Array.isArray(val) ? val : val.split(',');
          state.indeterminate = !!val.length && val.length < defaultData.length;
          state.checkAll = val.length === defaultData.length;
        },
        { deep: true, immediate: true },
      );
      watch(
        () => formState.value.FUNCINFO_CHILDHEIGHT,
        (val) => {
          formState.value.FUNCINFO_CHILDHEIGHT = val;
        },
        { deep: true },
      );

      const treeConfigRef = ref(null);
      const moreConfigRef = ref(null);
      const methods = {
        isShowFormItem(childItem) {
          return (
            !childItem.showType ||
            (childItem.showType == 'VIEW' &&
              childItem.showType == formState.value.FUNCINFO_FUNCTYPE) ||
            (childItem.showType == 'TREE' &&
              childItem.showType == formState.value.FUNCINFO_FUNCTYPE &&
              ((childItem.value == 'FUNCINFO_MORE_BUTTON_CONFIG' &&
                formState.value.FUNCINFO_OPEN_MORE_BUTTON == '1') ||
                [
                  'FUNCINFO_OPEN_MORE_BUTTON',
                  'FUNCINFO_FUNCDICCONFIG',
                  'FUNCINFO_OPEN_SEARCH_BUTTON',
                  'FUNCINFO_CLOSE_DRAG_SORT',
                ].includes(childItem.value)))
          );
        },
        clickIconWF() {
          const microStore = useMicroStore();
          const {
            FUNCINFO_FUNCNAME,
            FUNCINFO_FUNCCODE,
            FUNCINFO_TABLENAME,
            SY_PRODUCT_ID,
            SY_PRODUCT_CODE,
            SY_PRODUCT_NAME,
            JE_CORE_FUNCINFO_ID,
          } = funcStore.funcBean;
          const funcData = {
            funcName: FUNCINFO_FUNCNAME, //功能名称
            funcCode: FUNCINFO_FUNCCODE,
            funcId: JE_CORE_FUNCINFO_ID, //功能Id
            tableCode: FUNCINFO_TABLENAME, //功能对应资源表的code
            SY_PRODUCT_ID, //功能对应产品的id
            SY_PRODUCT_CODE, //功能对应产品的code
            SY_PRODUCT_NAME, //功能对应产品的名称
          };
          microStore.emitMicro('JE_CORE_WORKFLOW', 'workflow-init', { funcData: funcData }, () => {
            methods.getListBaseConfigData();
          });
        },
        getTableRef(refTable) {
          tableRef.value = refTable;
        },
        getTreeConfigRef(refConfig) {
          treeConfigRef.value = refConfig;
        },
        getMoreConfigRef(refMore) {
          moreConfigRef.value = refMore;
        },
        // 校验文本域
        changeTextarea(type) {
          let value = formState.value[type];
          if (value && type == 'FUNCINFO_FUNCREMARK') {
            formState.value[type] = value.substr(0, 100);
          }
          if (value && type == 'FUNCINFO_WHERESQL') {
            const reg = /^and /gi;
            if (!reg.test(value)) {
              formState.value[type] = 'and ';
            }
          }
        },
        // 处理点击功能类型中必填的数据
        changeSelect(type) {
          if (type == 'FUNCINFO_FUNCTYPE') {
            const selectType = formState.value[type] == 'VIEW' ? 'VIEW' : '';
            selectType &&
              (querysArr.value = [
                {
                  code: 'RESOURCETABLE_TYPE',
                  type: '=',
                  value: selectType,
                },
                {
                  code: 'RESOURCETABLE_ISCREATE',
                  type: '=',
                  value: '1',
                  cn: 'and',
                },
                {
                  code: 'SY_PRODUCT_ID',
                  type: '=',
                  value: productId.value,
                  cn: 'and',
                },
              ]);
            !selectType &&
              (querysArr.value = [
                {
                  code: 'RESOURCETABLE_ISCREATE',
                  type: '=',
                  value: '1',
                  cn: 'and',
                },
                {
                  code: 'SY_PRODUCT_ID',
                  type: '=',
                  value: productId.value,
                  cn: 'and',
                },
              ]);
            if (formState.value[type] == 'VIEW') {
              moreConfigRef.value = null;
              treeConfigRef.value = null;
            } else if (formState.value[type] == 'TREE') {
              tableRef.value = null;
            } else {
              formState.value[type] = 'FUNC';
              moreConfigRef.value = null;
              treeConfigRef.value = null;
              tableRef.value = null;
            }
          }
        },
        clickTipView(item) {
          Modal.alert({
            content: item.unitTpl,
            title: item.label,
            icon: 'fal fa-info-circle',
            status: 'info',
            width: item.value == 'FUNCINFO_VIEWCONFIGINFO' ? '760' : '460',
          });
        },
        // 点击扩展面板
        changeExtend(data, key) {
          formState.value[key] = (data && JSON.stringify(data)) || '';
          const { FUNCINFO_FUNCCODE, tableCode, JE_CORE_FUNCINFO_ID } = formState.value;
          const params = {
            FUNCINFO_EXPANDPANELS: (data && JSON.stringify(data)) || '',
            FUNCINFO_FUNCCODE,
            tableCode,
            JE_CORE_FUNCINFO_ID,
          };
          UpdateTableItemFunction(params)
            .then((res) => {
              Modal.message(res.message, 'success');
              extendShow.value = false;
            })
            .catch((err) => {
              Modal.alert(err.message, 'error');
              console.log('error', err);
            });
        },
        // 改变子功能高度 input
        changeChildHeightInput(value, option) {
          option.value = value;
        },
        // 改变子功能高度 select
        changeChildHeight(value, option) {
          option.text = option.code = value;
        },
        // 点击排序条件
        changeOrderSql(key, Obj) {
          formState.value[key] = Obj.content;
        },
        // 改变排序
        changeSort(key, itemObj) {
          if (key == 'FUNCINFO_ORDERSQL') {
            return false;
          }
          const sql = formState.value[itemObj.code];
          if (!sql || !sql.replace(/(^\s*)|(\s*$)/g, '')) {
            Modal.alert(`${itemObj.name}不能为空`, 'warning');
            return false;
          }
          const params = {
            funcId: props.recordData.JE_CORE_FUNCINFO_ID,
            sql,
          };
          ChangeTranslateSql(params).then((res) => {
            formState.value[key] = res;
          });
        },
        // 绑定工作流删除 || 子功能高度的删除
        deleteColumn(key, index) {
          if (index == 0) return false;
          console.log(formState.value[key], index);
          formState.value[key].splice(index, 1);
        },
        // 子功能高度，绑定工作流添加
        addColumn(key, index) {
          rulesHeight.value = false;
          // 如果索引为0的时候，代表添加，否则就是删除
          if (index == 0) {
            const value = formState.value[key];
            if (value.length > 1) {
              const item = value[value.length - 1];
              let result = Object.values(item).some((itemKey) => itemKey === '');
              if (result) {
                rulesHeight.value = true;
                return false;
              }
            }
            rulesHeight.value = false;
            const record = { code: 'default', value: '', text: '通用' };
            formState.value[key].push(record);
            return false;
          }

          methods.deleteColumn(key, index);
        },
        // 全选
        onCheckAllChange(e) {
          formState.value.FUNCINFO_DISABLEQUERYSQL = e.target.checked
            ? 'keyword,strategy,group'
            : '';
          Object.assign(state, {
            indeterminate: false,
          });
        },
        // 当点击功能编码修改成功后，要重新赋值功能编码
        changeFunctionCode(value) {
          formState.value.FUNCINFO_FUNCCODE = value;
        },
        // 改变tip浮上去的颜色
        changeColor(flag) {
          if (flag) {
            return 'cursor:pointer;color: #3265F5';
          }
          return 'cursor:pointer;';
        },
        // 点击按钮
        operateButton(type) {
          // type点击按钮的类型
          // extend扩展面板
          if (type == 'extend') {
            extendShow.value = true;
          }
          if (type == 'save') {
            loading.value = true;
            const value = formState.value.FUNCINFO_CHILDHEIGHT;
            if (value.length > 1) {
              const item = value[value.length - 1];
              let result = Object.values(item).some((itemKey) => itemKey === '');
              if (result) {
                rulesHeight.value = true;
              } else {
                rulesHeight.value = false;
              }
            }
            if (rulesHeight.value) {
              Modal.alert('该字段不能为空', 'warning');
              return false;
            }
            rulesHeight.value = false;
            const FUNCINFO_ORDERSQL_VAL =
              (formState.value.FUNCINFO_ORDERSQL && formState.value.FUNCINFO_ORDERSQL.trim()) || '';
            if (FUNCINFO_ORDERSQL_VAL) {
              const reg1 = /^order by/gi;
              if (!reg1.test(FUNCINFO_ORDERSQL_VAL)) {
                Modal.alert('请输入正确的排序条件: 以order by 开头', 'info');
                return false;
              }
            }
            validate()
              .then(() => {
                const tableRef1 = (tableRef.value && tableRef.value.props.store.data) || [];
                if (tableRef1.length) {
                  tableRef1.forEach((item) => {
                    tableRef.value.props.store.commitRecord(item);
                  });
                }

                const treeConfigRefs =
                  (treeConfigRef.value && treeConfigRef.value.props.store.data) || [];
                if (treeConfigRefs.length) {
                  treeConfigRefs.forEach((item) => {
                    treeConfigRef.value.props.store.commitRecord(item);
                  });
                }
                const moreConfigRefs =
                  (moreConfigRef.value && moreConfigRef.value.props.store.data) || [];
                if (moreConfigRefs.length && formState.value.FUNCINFO_OPEN_MORE_BUTTON == '1') {
                  moreConfigRefs.forEach((item) => {
                    moreConfigRef.value.props.store.commitRecord(item);
                  });
                }
                // 这边获取到保存的值，同时也要调取接口
                let saveData = JSON.parse(JSON.stringify(formState.value));
                // 树形功能配置项
                saveData.FUNCINFO_FUNCDICCONFIG =
                  treeConfigRefs || saveData.FUNCINFO_FUNCDICCONFIG || '';
                // 更多按钮配置
                saveData.FUNCINFO_MORE_BUTTON_CONFIG =
                  moreConfigRefs || saveData.FUNCINFO_MORE_BUTTON_CONFIG || '';
                // 操作视图表信息
                saveData.FUNCINFO_VIEWCONFIGINFO =
                  tableRef1 || saveData.FUNCINFO_VIEWCONFIGINFO || '';
                // 这边要数组变成字符串的字段
                const arrToString = [
                  'FUNCINFO_CHILDHEIGHT',
                  'FUNCINFO_FUNCDICCONFIG',
                  'FUNCINFO_MORE_BUTTON_CONFIG',
                  'FUNCINFO_VIEWCONFIGINFO',
                  'FUNCINFO_EXPANDPANELS',
                ];
                saveData = methods.formatArrToString(arrToString, saveData);
                baseConfigSave(saveData)
                  .then((res) => {
                    VueEvent.emit('refleshTreeData');
                    loading.value = false;
                    Modal.message(res.message, 'success');
                  })
                  .catch((err) => {
                    Modal.alert(err.message, 'error');
                    loading.value = false;
                    console.log('error', err);
                  });
              })
              .catch((err) => {
                loading.value = false;
                console.log('error', err);
              });
          }
          if (type == 'async') {
            asyncConfigShow.value = false;
            Modal.confirm('该操作会覆盖原有的功能字段信息配置，请谨慎操作！', () => {
              asyncConfigShow.value = true;
            });

            // 字段与配置同步
          }
        },
        // 数组格式话为字符串
        formatArrToString(formatKey, targetObj) {
          formatKey.map((key) => {
            const value = targetObj[key] || [];
            if (Array.isArray(value) && value.length) {
              targetObj[key] = JSON.stringify(value);
            } else {
              targetObj[key] = '';
            }
          });
          return targetObj;
        },
        // 点击锚点跳到对应的页面
        handleAnchorClick(type) {
          const clickElement = preview.value.querySelector(`[type="${type}"]`);
          clickElement && (clickElement.style.background = '#E4F1FF');
          setTimeout(() => {
            clickElement && (clickElement.style.background = '#fff');
          }, 1000);
          clickElement &&
            preview.value.scrollTo({
              left: 0,
              behavior: 'smooth',
              top: clickElement.offsetTop,
            });
        },
        // 初始获取配置
        getListBaseConfigData() {
          console.log('props.recordData', props.recordData.JE_CORE_FUNCINFO_ID);
          const params = {
            pkValue: props.recordData.JE_CORE_FUNCINFO_ID,
            type: 'func',
          };
          GetListBaseConfig(params)
            .then((res) => {
              delete res.$TABLE_CODE$;
              res.tableCode = 'JE_CORE_FUNCINFO';
              // 子功能高度
              res.FUNCINFO_CHILDHEIGHT = res.FUNCINFO_CHILDHEIGHT
                ? JSON.parse(res.FUNCINFO_CHILDHEIGHT)
                : [{ text: '通用', code: 'default', value: 0 }];
              // 树形功能配置项
              res.FUNCINFO_FUNCDICCONFIG = res.FUNCINFO_FUNCDICCONFIG
                ? JSON.parse(res.FUNCINFO_FUNCDICCONFIG)
                : [];
              // 更多按钮配置
              res.FUNCINFO_MORE_BUTTON_CONFIG = res.FUNCINFO_MORE_BUTTON_CONFIG
                ? JSON.parse(res.FUNCINFO_MORE_BUTTON_CONFIG)
                : [
                    {
                      text: '添加',
                      code: 'treeInsertBtn',
                      enable: '1',
                      expression: '',
                      icon: 'fal fa-plus',
                      js: '',
                      relyCode: '',
                      relyName: '',
                      systemField: '1',
                      type: 'button',
                    },
                    {
                      text: '编辑',
                      code: 'treeEditBtn',
                      enable: '1',
                      expression: '',
                      icon: 'fal fa-edit',
                      js: '',
                      relyCode: '',
                      relyName: '',
                      systemField: '1',
                      type: 'button',
                    },
                    {
                      text: '删除',
                      code: 'treeRemoveBtn',
                      enable: '1',
                      expression: '',
                      icon: 'fal fa-times',
                      js: '',
                      relyCode: '',
                      relyName: '',
                      systemField: '1',
                      type: 'button',
                    },
                    {
                      text: '转移',
                      code: 'treeTransferBtn',
                      enable: '1',
                      expression: '',
                      icon: 'fal fa-folder-upload',
                      js: '',
                      relyCode: '',
                      relyName: '',
                      systemField: '1',
                      type: 'button',
                    },
                    {
                      text: '',
                      enable: '1',
                      expression: '',
                      icon: '',
                      js: '',
                      relyCode: '',
                      relyName: '',
                      systemField: '1',
                      type: 'divider',
                    },
                  ];
              // 操作视图表信息
              res.FUNCINFO_VIEWCONFIGINFO = res.FUNCINFO_VIEWCONFIGINFO
                ? JSON.parse(res.FUNCINFO_VIEWCONFIGINFO)
                : [];
              // 扩展面板
              res.FUNCINFO_EXPANDPANELSFUNCINFO_EXPANDPANELS =
                res.FUNCINFO_EXPANDPANELSFUNCINFO_EXPANDPANELS
                  ? JSON.parse(res.FUNCINFO_EXPANDPANELSFUNCINFO_EXPANDPANELS)
                  : [];

              res.FUNCINFO_TREETITLE = res.FUNCINFO_TREETITLE ? res.FUNCINFO_TREETITLE : '快速查询';
              res.FUNCINFO_TREEWIDTH = res.FUNCINFO_TREEWIDTH ? res.FUNCINFO_TREEWIDTH : '230';
              formState.value = { ...res };

              methods.changeSelect('FUNCINFO_FUNCTYPE');
            })
            .catch((err) => {
              Modal.alert(err.message, 'error');
              console.log('error', err);
            });
        },
      };
      onBeforeMount(() => {
        loadDDItemByCodes(['JE_FUNC_CHILD_LAYOUT', 'JE_FUNC_INSERTTYPE']).then(() => {
          const masterSlaveData = FUNCTION_BSAE_FORM.find((item) => item.value == 'masterSlave');
          const childData = masterSlaveData.formData.find(
            (item) => item.value == 'FUNCINFO_CHILDSHOWTYPE',
          );
          childData.selectData = getChildShowData();

          const coreConfigData = FUNCTION_BSAE_FORM.find((item) => item.value == 'coreConfig');
          const insertData = coreConfigData.formData.find(
            (item) => item.value == 'FUNCINFO_INSERTTYPE',
          );
          insertData.selectData = getInsertData();

          CORE_CONFIG_ANCHOR.value = FUNCTION_BSAE_FORM;
        });
        const StringToArr = [
          'FUNCINFO_CHILDHEIGHT',
          'FUNCINFO_FUNCDICCONFIG',
          'FUNCINFO_MORE_BUTTON_CONFIG',
          'FUNCINFO_VIEWCONFIGINFO',
          'FUNCINFO_EXPANDPANELS',
        ];
        Object.keys(formState.value).forEach((key) => {
          if (StringToArr.includes(key)) {
            formState.value[key] = formState.value[key] ? JSON.parse(formState.value[key]) : [];
          }
        });
      });

      onMounted(() => {
        nextTick(() => {
          methods.changeSelect('FUNCINFO_FUNCTYPE');
        });
      });

      return {
        productId,
        querysArr,
        xTreeTable,
        preview,
        CORE_CONFIG_ANCHOR,
        formState,
        ...methods,
        extendShow,
        indeterminate: ref(true),
        ...toRefs(state),
        validateInfos,
        rulesRef,
        modalShow,
        mouseNowData,
        tableRef,
        treeConfigRef,
        moreConfigRef,
        editShow,
        rulesHeight,
        asyncConfigShow,
        loading,
      };
    },
  });
</script>
<style lang="less">
  .tip-item {
    display: flex;
    vertical-align: middle;
    padding: 10px;
    .item-right {
      vertical-align: middle;
    }
    .img {
      width: 80px;
      height: 60px;
      vertical-align: middle;
      margin-right: 20px;
    }
  }
  .function-base-page {
    .ant-col-22 {
      .ant-form-item-control {
        width: calc(100% - 200px) !important;
      }
    }
    .je-form-item.ant-form-item-with-help {
      margin-bottom: 20px !important;
    }
    .clean-right-border:hover {
      background: #d9d9d9 !important;
      border-radius: 2px !important;
    }
    .ant-form-item-label {
      > label {
        display: inline-block !important;
        line-height: 32px;
      }
    }
    .header-flex {
      > .ant-btn {
        padding: 0px 12px !important;
        height: 32px !important;
        line-height: 32px !important;
        // border-radius: 0 !important;
      }
    }

    .ant-input-number {
      width: 100%;
    }
    .fa-plus-style {
      font-size: 16px;
      cursor: pointer;
      background: #8cbc5f;
      color: #fff;
      padding: 8px 10px;
      border-radius: 2px;
    }
    .fal-background {
      background: #f59b22 !important;
      padding: 5px 8px !important;
      color: #fff;
    }
  }
</style>
<style lang="less" scoped>
  .function-base-page {
    display: flex;
    flex-direction: column;
    .header-flex {
      flex: none;
      display: flex;
      justify-content: space-between;
      background: #f7f9fc;
      height: 40px;
      line-height: 40px;
      padding-left: 4px;
      // border-top: 1px solid #f0f0f0;
      border-bottom: 1px solid #f0f0f0;

      .button-pointer {
        cursor: pointer;
      }
      .add-margin {
        margin-left: 8px;
      }
      .button-color {
        color: #3265f5;
      }
    }
    .function-content {
      flex: auto;
      padding: 0 40px 45px;
      overflow: auto;
      .title {
        font-size: 18px;
        color: #3265f5;
        padding: 10px 0 10px 40px;
      }
    }
  }
</style>
